<template>
  <div class="sourceManage" :loading="true">
    <el-tabs v-model="sourceType" type="card" @tab-click="handleTabClick">
      <el-tab-pane label="视频" name="1"></el-tab-pane>
      <el-tab-pane label="图片" name="2"></el-tab-pane>
      <el-tab-pane label="音频" name="3"></el-tab-pane>
    </el-tabs>
    <el-row>
      <el-col :span="8"><el-input v-model="wd" placeholder="请输入标题关键字搜索" @keyup.enter.native="initPageData"></el-input></el-col>
      <el-col :span="3" style="margin-left:10px"><el-button type="primary" @click="initPageData">搜索</el-button></el-col>
    </el-row>
    <el-row>
      <div class="field-tit">内容性质:</div>
      <div class="field-bd">
        <el-select v-model="contentType" clearable>
          <el-option v-for="item,n in attrs" :value="item.id" :label="item.name" :key="n.toString()"></el-option>
        </el-select>
      </div>
    </el-row>
    <source-video v-if="sourceType==='1'" :loading="loading"></source-video>
    <source-audio v-else-if="sourceType==='3'" :loading="loading"></source-audio>
    <source-image ref="imgList" v-else-if="sourceType==='2'" :loading="loading"></source-image>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="size"
        layout="total, prev, pager, next, jumper"
        :total="sourceList.page.total"
        @current-change="initPageData()">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  import sourceVideo from './video'
  import sourceAudio from './audio'
  import sourceImage from './image'
  import Clipboard from 'clipboard'
  export default {
    components: {sourceVideo, sourceAudio, sourceImage},
    data () {
      return {
        wd: '',
        sourceType: this.$route.params.type === 'video' ? '1' : this.$route.params.type === 'image' ? '2' : '3',
        contentType: null,
        size: 12,
        page: 1,
        loading: false
      }
    },
    mounted () {
      let $this = this
      this.SET_CURRENT_DIR(null)
      this.getContentTypes()
      // 定义读取数据事件
      this.$bus.$off('reloadSource')
      this.$bus.$on('reloadSource', function (pid) {
        $this.initPageData(pid)
      })
      this.initPageData()
      const clipboard = new Clipboard('.copy')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
      })
    },
    computed: {
      ...mapState({
        'sourceList': state => state.sourceManage.sourceList,
        'sourceDir': state => state.sourceManage.sourceDir,
        'currentDir': state => state.sourceManage.currentDir,
        attrs: state => state.contentManage.contentType
      })
    },
    methods: {
      ...mapActions(['getSourceList', 'getImageDir', 'getContentTypes']),
      ...mapMutations(['SET_CURRENT_DIR']),
      // 初始化页面数据
      async initPageData () {
        this.loading = true
        await this.getSourceList({
          type: +this.sourceType,
          contentType: this.contentType,
          wd: this.wd,
          pid: this.currentDir,
          size: this.size,
          page: this.page
        })
        this.loading = false
      },
      // 切换标签
      handleTabClick (a) {
        let type = ''
        this.wd = ''
        switch (this.sourceType) {
          case '1':
            type = 'video'
            break
          case '2':
            type = 'image'
            break
          case '3':
            type = 'audio'
            break
        }
        this.$router.push({ name: 'ContentSource', params: { type: type } })
        if (this.sourceType !== '2') {
          this.SET_CURRENT_DIR(null)
          this.initPageData()
        }
      }
    }
  }
</script>
<style lang="scss">
  .sourceManage{
    .el-row{margin-bottom: 15px}
    .upload{
      width:300px;
      .el-upload__tip{margin-top:0;margin-bottom:-10px}
    }
    .sourceBox{display:flex;flex-wrap:wrap;justify-content:left;padding:10px 0;border:1px solid #dfe6ec}
    .sourceBox .noMessage{width:100%;text-align:center;}
    .dirTree~.sourceList{margin-left:220px;}
    .dialog_upload{width:500px}
  }
</style>
